<template>
  <n-layout has-sider style="height: 100%" :class="themeConfig.showBackImg ? 'bg' : ''">
    <n-layout-sider
        :style="{
          backgroundColor: themeConfig.siderColor,
        }"
        bordered collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        show-trigger
        :native-scrollbar="false"
        :collapsed="collapsed"
        @collapse="collapsed = true"
        @expand="collapsed = false"
        :class="themeConfig.componentOpacity ? 'bg-opacity' : ''"
        v-if="themeConfig.menuMode === 'vertical'"
    >
      <h-z-menu
          :collapsed="collapsed"
      />
    </n-layout-sider>
    <n-layout class="bg-opacity">
      <n-layout-header
          :style="{backgroundColor: themeConfig.topBarColor}"
          bordered
          class="layout_top"
          :class="themeConfig.componentOpacity ? 'bg-opacity' : ''">
        <h-z-menu
            :collapsed="collapsed"
            :model="themeConfig.menuMode"
            v-if="themeConfig.menuMode === 'horizontal'"
        />
        <n-space justify="end" style="width: 100%;margin-right: 10px">

          <h-z-drop-menu/>
        </n-space>
      </n-layout-header>
      <n-layout-content
          :style="{
              backgroundColor: themeConfig.contentColor,
              padding: '10px',
              height: 'calc(100% - 40px)'
          }"
          :class="themeConfig.componentOpacity ? 'bg-opacity' : ''">
        <n-flex vertical>
          <h-z-banner v-if="themeConfig.banner" />
          <router-view></router-view>
        </n-flex>
      </n-layout-content>
    </n-layout>
  </n-layout>

</template>

<script lang="ts" setup>
import {ref, onMounted, h} from "vue";
// @ts-ignore
import HZMenu from "/@page/home/component/HZMenu.vue";
// @ts-ignore
import HZBanner from "/@page/home/component/HZBanner.vue";
// @ts-ignore
import {useThemeConfig} from "/@bean/GlobalConfig";
import {storeToRefs} from "pinia";
import HZDropMenu from "/@page/home/component/HZDropMenu.vue";

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);


const collapsed = ref(false);


</script>

<style scoped lang="scss">
.layout_top {
  height: 40px;
  align-items: center;
  display: flex;
}
</style>